<template>
    <div class="elementEchart" ref="elementEchart"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { highpressure } from "@/utils/tools";
interface Props {
    echartsData?: any;
    yaxisData?: any;
}
const props = withDefaults(defineProps<Props>(), {
    echartsData: [],
    yaxisData: [],
});

type EChartsOption = echarts.EChartsOption;
const elementEchart: any = ref(null);
// const a: any = ref([]);
// const b: any = ref([]);
var myChart: any = null;
var option: any = {
    darkMode: "auto",
    backgroundColor: "rgba(0,0,0,0)",
    grid: {
        left: "20px", // 左侧的距离
        right: "20px", // 右侧的距离
        bottom: "10px", // 底部的距离
        top: "10px", // 顶部的距离
        containLabel: true, // 包含标签
    },
    xAxis: {
        axisTick: {
            alignWithLabel: true,
        },
        type: "category",
        boundaryGap: false,
        data: [],
        axisLine: {
            lineStyle: {
                show: true, //是否显示坐标轴轴线，
                color: "#ffffff", //x轴轴线的颜色
                width: 1, //x轴粗细
            },
        },
    },
    yAxis: {
        type: "category",
        // data: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
        data: [0],
        splitLine: {
            show: true,
            lineStyle: {
                type: "dashed", // 设置虚线类型
                color: "#d9d9d9",
            },
        },
        axisLine: {
            lineStyle: {
                show: true, //是否显示坐标轴轴线，
                color: "#ffffff", //x轴轴线的颜色
                width: 1, //x轴粗细
            },
        },
    },
    axisPointer: {
        label: {
            show: true,
            color: "#314150",
        },
    },
    tooltip: {
        show: true,
        trigger: "axis",
        axisPointer: {
            type: "cross", // 坐标轴指示器类型：十字准线
        },
        // 自定义显示内容
        formatter: function (params: any) {
            // return "";
            return `${params[0].value}`;
        },
    },
    series: [
        {
            data: [0],
            type: "line",
            smooth: true,
            areaStyle: {},
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
                    [
                        { offset: 0, color: "#2FB5FF" }, // 0% 处的颜色
                        { offset: 1, color: "rgba(47,181,255,0.01)" }, // 100% 处的颜色
                    ]
                ),
            },
        },
    ],
};
setTimeout(() => {
    echartsDatas();
}, 1000);
const echartsDatas = () => {
    if (myChart == null) {
        myChart = echarts.init(elementEchart.value);
    }

    option.xAxis.data.push(highpressure());
    // option =
    option && myChart.setOption(option);
    window.addEventListener("resize", function () {
        // console.log(myChart.value);
        myChart.resize();
    });
};
const setData = (a: any, b: any) => {
    // 添加新数据到数据系列
    console.log(a, "321321");
    // if (a == 0) {
    //     a = getRandomInt(1, 10);
    // }
    option.series[0].data.push(Number(a));

    // 如果x轴是类目型的，可能还需要添加类目名称
    option.xAxis.data.push(b);
    let aa = [];
    let m = getMax(option.series[0].data);
    for (let i = 0; i <= Math.ceil(m); i++) {
        aa.push(i);
    }
    option.yAxis.data = aa;
    if (myChart) {
        myChart.setOption(option);
    }
};

defineExpose({ elementEchart, setData });

// function getRandomInt(min: any, max: any) {
//     min = Math.ceil(min);
//     max = Math.floor(max);
//     return Math.floor(Math.random() * (max - min + 1)) + min;
// }
function getMax(abc: any) {
    // 1.要深拷贝数组
    abc = abc.slice(0);
    // 2.排序（升序第一个值是最小值，降序第一个值是最大值）
    abc.sort(function (a: any, b: any) {
        return b - a;
    });
    // 3.返回第一个值
    return abc[0];
}
</script>
<style scoped lang="scss">
.elementEchart {
    width: 100%;
    height: 1.1rem;
}
</style>
